<style>
    .balls {
        border-radius: 50%;
        top: 249px;
        position: fixed;
        width: 50px;
        height: 50px;
        top: 60%;
        animation-name: jump;
        animation-duration: 2s;
        animation-iteration-count: infinite;
    }
    #red {
        background: red;
        left: 25%;
        animation-timing-function: linear;
    }
    #blue {
        background: blue;
        left: 50%;
        animation-timing-function: ease-out;
    }
    #green {
        background: green;
        left: 75%;
        animation-timing-function: cubic-bezier(0.311, 0.441, 0.444, 1.649);
    }

    @keyframes jump {
        50% {
            top: 10%;
        }
    }
</style>
<div class="balls" id="red"></div>
<div class="balls" id="blue"></div>
<div class="balls" id="green"></div>